<template>
	<!-- 活动风采页面 -->
	<view class="content">
		<!-- 一条风采 -->
		<view class="single" v-for="item in mienList">
			<!-- 头像 昵称 时间 -->
			<view class="headNameTime">
				<!-- 头像 -->
				<view class="head">
					<image :src="imgUrl+item.userAvatar" mode=""></image>
				</view>
				<!-- 昵称 时间 -->
				<view class="nameTime">
					<!-- 昵称 -->
					<view class="name">
						<text>{{item.userName}}</text>
					</view>
					<!-- 时间 -->
					<view class="time">
						<text>{{item.createTime}}</text>
					</view>
				</view>
			</view>
			<!-- 内容 -->
			<view class="textImageIcon"  >
				<!-- 文字 -->
				<text class="text" @click="jumpDetails(item)" >
					{{item.showText?item.showText:""}}
				</text>
				<!-- 图片 -->
				<view class="image" v-if="item.showFile != false" @click="jumpDetails(item)" >
						<u-album class="image_img" multipleSize="110" singleSize='353.5' :urls="item.showFile"></u-album>
				</view>
				<!-- 图标 -->
				<view class="icon">
					<view class="icon_one">
						<u-icon v-if="item.likeStatus==0" size="24" name="thumb-up" @click.stop="agreeWith(item.showId)">
						</u-icon>
						<u-icon v-if="item.likeStatus==1" size="24" name="thumb-up-fill" @click.stop="agreeWith(item.showId)">
						</u-icon>
					</view>
					<view class="icon_one">
					<u-icon @click.stop="open(item.showId)" size="24" name="chat"></u-icon>
					</view>
					<button @click="Chuanshen(item.showId)" open-type="share" :data-userid="item.userId">
						<uni-icons type="redo" size="24"></uni-icons>
					</button>
				</view>
			</view>
			<!-- 评论 -->
			<view class="praise">
				<!-- 总点赞数和总条数 -->
				<view class="number" @click="jumpDetails(item)">
					<!-- 总点赞 -->
					<view class="concur">
						<u-icon size="24" name="thumb-up"></u-icon>
						<text style="line-height: 50rpx;">{{item.likeCount}}人觉得很赞</text>
					</view>
					<!-- 总条数 -->
					<view class="total">
						<u-icon  size="24" name="more-circle"></u-icon>
						<text style="line-height: 50rpx;">{{item.allTotal}}条评论回复</text>
					</view>
				</view>
				<!-- 显示的评论 -->
				<view class="detailed" @click="jumpDetails(item)">
					<view v-for="praise in item.praise">
						<text class="nameOne">{{praise.userName}}:</text>
						<text class="textTwo">{{praise.content}}</text>
					</view>
				</view>
				<!-- 输入框 -->
				<view @click="open(item.showId)" class="">
					<u--input placeholder="请输入内容" border="surround" shape='square' disabled=true disabledColor='#EFEFEF'
						prefixIcon='edit-pen' customStyle="padding-top:3px;padding-bottom:3px;border-radius:7px;">
					</u--input>
				</view>
			</view>
		</view>
		<view class="popup">
			<uni-popup @maskClick="maskClick()" :animation="false" ref="popup" :safe-area=false background-color="#fff">
				<view class="popupContent" v-if="!share">
					<input :focus="firstFocus" v-model="value" class="popupInput" type="text">
					<view class="popupIcon">
						<u-icon name="plus-circle" v-if="emoji_show == false " size="32" @click="emoji_show = !emoji_show" ></u-icon>
						<u-icon name="minus-circle" v-else size="32" @click="emoji_show = !emoji_show" ></u-icon>
					</view>
					<button class="popupButton" @click="comment()">发送</button>
				</view>
					<uni-transition :show="emoji_show" duration='100'>
						<swiper class="slider" >
						    <swiper-item v-for="(item, key) in emojiData" :key="key" class="slider-emoji" :class="[key==emojiData.length-1?'lastbox':'']">
						        <text v-for="(emoji, index) in item" :key="index" @click="selemoji(emoji)"  class="slider-emoji-icon">{{ emoji }}</text>
						    </swiper-item>
						</swiper>
					</uni-transition>
				<!-- </view> -->
				<view class="" v-if="share">
					<share></share>
				</view>
			</uni-popup>
		</view>
		<Levitation :address="'/subPackages/activity/mienShare'"></Levitation>
	</view>

</template>

<script>
	import {
		getMien,
		PostComments,
		thumbsUpActivity
	} from '../../api/activity/mien'
	import config from '@/config.js'
	import emoji from '@/js_sdk/m-emoji/m-emoji_2.0.0/emoji.js'
	export default {
		data() {
			return {
				// _imgP:['http://162.14.204.143:9000//activity/2023/04/07/79a75daa-de70-40aa-8f31-37abc24bbd12_20230407155001A001.jpg'],
				imgUrl: config.imgUrl,
				total: '', //总条数
				pageNum: 1, //页数
				pageSize: 10, //每页条数
				share: false,
				emoji_show:false,
				firstFocus: false, //自动聚焦
				value: '', //输入框内容
				showId: '',
				mienList: [],
				emojiData:[],
				// 分享showid
				shareShowId:''
			}
		},
		// 上拉刷新
		onPullDownRefresh() {
			this.LoadData("刷新")
		},
		// 下拉触底
		onReachBottom() {
			this.pageNum++
			this.LoadData("加载")
		},
		onLoad() {
			var page = Math.ceil(emoji.length/36);
			    for (let i = 0; i < page; i++) {
			    this.emojiData[i] = [];
			    for (let k = 0; k < 36; k++) {
			        emoji[i*36+k]?this.emojiData[i].push(
			        emoji[i*36+k]
			        ):''
			    }
			}
			console.log("再一次加载")
			this.LoadData("加载")
		},
		mounted() {
			let domes = uni.createSelectorQuery().selectAll('.image')
			console.log("获取节点信息",domes)
		},
		methods: {
			// 分享点击id
			Chuanshen(showid){
				this.shareShowId = showid
			},
			// 表情回调
			emojidisplay(){
				if (this.emoji_show) {
					this.firstFocus = false
					let _this = this
					setTimeout(function() {
						_this.firstFocus = true
					}, 500)
					this.emoji_show = false
				} else{
					this.firstFocus = false
					this.emoji_show = true
				}
			},
			selemoji(m) {
				this.value = this.value+m
			},
			// 评论风采
			comment() {
				let _data = {
					userId: uni.getStorageSync("userinfo").userid,
					showId: this.showId,
					remarkContent: this.value,
					userName:uni.getStorageSync("userinfo").nickname,
					userAvatar:uni.getStorageSync("userinfo").avatar
				}
				let praise = {
					userName: uni.getStorageSync('userinfo').nickname,
					content: this.value
				}
				if (_data.remarkContent) {
					PostComments(_data).then(res => {
						this.$refs.popup.close()
						for (var i = 0; i < this.mienList.length; i++) {
							if (this.showId == this.mienList[i].showId) {
								this.mienList[i].allTotal
								this.mienList[i].praise.push(praise)
							}
						}
						this.value = ''
					})
				} else {
					this.value = ''
					this.$modal.msgError("请输入评论内容");
				}

			},
			// 点赞
			agreeWith(id) {
				let _data = {
					userId: '',
					showId: '',
					state: '',
					userName:'',
					userAvatar:'',
				}
				for (var i = 0; i < this.mienList.length; i++) {
					if (this.mienList[i].showId == id && this.mienList[i].likeStatus == 1) {
						this.mienList[i].likeCount--
						this.mienList[i].likeStatus = 0
						_data = {
							userId: uni.getStorageSync("userinfo").userid,
							showId: id,
							state: -1,
							userName:uni.getStorageSync("userinfo").nickname,
							userAvatar:uni.getStorageSync("userinfo").avatar
						}
					} else if (this.mienList[i].showId == id && this.mienList[i].likeStatus == 0) {
						this.mienList[i].likeCount++
						this.mienList[i].likeStatus = 1
						_data = {
							userId: uni.getStorageSync("userinfo").userid,
							showId: id,
							state: 1,
							userName:uni.getStorageSync("userinfo").nickname,
							userAvatar:uni.getStorageSync("userinfo").avatar
						}
					}
				}
				thumbsUpActivity(_data).then(res => {
					console.log(res)
				})
			},
			// 加载数据
			LoadData(event) {
				console.log(event)
				let _data = {
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}
				this.$modal.loading("正在加载");
				let _this = this
				switch (event){
					case "加载":
					getMien(_data).then(res => {
						console.log(res,"加载数据")
						_this.$modal.closeLoading();
						_this.total = res.total
						if (res.rows.length) {
							for (var i = 0; i < res.rows.length; i++) {
								if (res.rows[i].showFile) {
									let imgFile = []
									for (let index=0;index<JSON.parse(res.rows[i].showFile).length;index++){
										imgFile.push(config.imgUrl+JSON.parse(res.rows[i].showFile)[index])
									}
									res.rows[i].showFile = imgFile
								}
								let nowDate = new Date()
								let year=nowDate.getFullYear()
								let month=nowDate.getMonth() + 1
								let date=nowDate.getDate()
								let today = ''+year+"-"+(month>=10?month+"-"+date:"0"+month+"-"+date)
								let yesterday = ''+year+"-"+(month>=10?month+"-"+(date-1):"0"+month+"-"+(date-1))
								res.rows[i].createTime = res.rows[i].createTime.split(" ")[0] == today?"今天"+" "+res.rows[i].createTime.split(" ")[1].split(":")[0]+":"+res.rows[i].createTime.split(" ")[1].split(":")[1]: res.rows[i].createTime.split(" ")[0]==yesterday?"昨天"+" "+res.rows[i].createTime.split(" ")[1].split(":")[0]+":"+res.rows[i].createTime.split(" ")[1].split(":")[1]:res.rows[i].createTime.split(" ")[0].split('-')[1]+"-"+res.rows[i].createTime.split(" ")[0].split('-')[1]+" "+res.rows[i].createTime.split(" ")[1].split(":")[0]+":"+res.rows[i].createTime.split(" ")[1].split(":")[1]
								_this.mienList.push(res.rows[i])
							}
						} else {
							_this.$modal.msg("已经没有了！")
						}
					
					})
						break;
					case "刷新":
					_data = {
						pageNum: 1,
						pageSize: this.pageSize
					}
					_this.mienList = []
						getMien(_data).then(res => {
							_this.$modal.closeLoading();
							_this.total = res.total
							if (res.rows.length) {
								for (var i = 0; i < res.rows.length; i++) {
									if (res.rows[i].showFile) {
										let imgFile = []
										for (let index=0;index<JSON.parse(res.rows[i].showFile).length;index++){
											imgFile.push(config.imgUrl+JSON.parse(res.rows[i].showFile)[index])
										}
										res.rows[i].showFile = imgFile
									}
									let nowDate = new Date()
									let year=nowDate.getFullYear()
									let month=nowDate.getMonth() + 1
									let date=nowDate.getDate()
									let today = ''+year+"-"+(month>=10?month+"-"+date:"0"+month+"-"+date)
									let yesterday = ''+year+"-"+(month>=10?month+"-"+(date-1):"0"+month+"-"+(date-1))
									res.rows[i].createTime = res.rows[i].createTime.split(" ")[0] == today?"今天"+" "+res.rows[i].createTime.split(" ")[1].split(":")[0]+":"+res.rows[i].createTime.split(" ")[1].split(":")[1]: res.rows[i].createTime.split(" ")[0]==yesterday?"昨天"+" "+res.rows[i].createTime.split(" ")[1].split(":")[0]+":"+res.rows[i].createTime.split(" ")[1].split(":")[1]:res.rows[i].createTime.split(" ")[0].split('-')[1]+"-"+res.rows[i].createTime.split(" ")[0].split('-')[1]+" "+res.rows[i].createTime.split(" ")[1].split(":")[0]+":"+res.rows[i].createTime.split(" ")[1].split(":")[1]
									_this.mienList.push(res.rows[i])
								}
							}
						})
						break
					default:
						break;
				}
				
			},
			// 弹出遮罩框
			open(code) {
				this.showId = code
				this.$refs.popup.open('bottom')
				this.firstFocus = false
				let _this = this
				setTimeout(function() {
					_this.firstFocus = true
				}, 500)
			},
			// 关闭遮罩层触发
			maskClick() {
				this.share = false
			},
			// 跳转详情
			jumpDetails(item) {
				let showId = item.showId
				for (var i = 0; i < this.mienList.length; i++) {
					if (showId==this.mienList[i].showId) {
						this.$tab.navigateTo("/subPackages/activity/mienDetailed?showId=" + this.mienList[i].showId)
					}
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		background-color: #f6f6f6;
		width: 100%;
		display: flex;
		flex-direction: column;
	}
	.image{
		width: 100%;
	}
	.single {
		width: 100%;
		padding: 30rpx 22rpx 15rpx 22rpx;
		box-sizing: border-box;
		margin-bottom: 32rpx;
		background-color: #fff;
	}

	.headNameTime {
		display: flex;
	}

	.head {
		width: 15%;
		height: 7.5vh;
	}

	.head image {
		width: 100%;
		height: 100%;
	}

	.nameTime {
		padding-left: 22rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	.name {
		font-size: 32rpx;
		color: #576B95;
	}

	.time {
		font-size: 24rpx;
		color: #9A9A9A;
	}

	.textImageIcon {
		padding-top: 12rpx;
	}

	.text {
		color: #101010;
		font-size: 32rpx;
		padding-bottom: 20rpx;
		display: block;
	}

	.icon {
		height: 5vh;
		display: flex;
		justify-content: flex-end;
		width: 100%;
		align-items: center;
		border-bottom: 1rpx solid #E9E9E8;
		padding-bottom: 10rpx;
	}
	.icon_one{
		padding-right: 10px;
	}
	.icon .u-icon {
		padding-right: 16rpx;
	}

	.icon .u-icon:nth-last-child(1) {
		padding-right: 0rpx;
	}

	.praise {
		width: 100%;
	}

	.number {
		display: flex;
		flex-direction: column;
	}

	.concur,
	.total {
		display: flex;
		flex-direction: row;
	}

	.concur .u-icon,
	.total .u-icon {
		padding-right: 10rpx;
	}

	.detailed {
		padding-top: 10rpx;
		width: 100%;
	}

	.detailed view {
		padding-bottom: 12rpx;
	}

	.nameOne {
		font-size: 32rpx;
		font-weight: 600;
		color: #101010;
		padding-right: 12rpx;
	}

	.textTwo {
		font-size: 32rpx;
		color: #101010;
	}

	.popupContent {
		display: flex;
		justify-content: space-around;
		align-items: center;
		background: #f0f0f0;
		padding: 20rpx 0;
	}

	.popupInput {
		width: 65%;
		height: 70rpx;
		border-radius: 50rpx;
		margin: 0 0 20rpx 20rpx;
		background: url('../../static/bi.png') no-repeat;
		background-size: 36rpx 36rpx;
		background-position: 10rpx 10rpx;
		padding-left: 55rpx;
		background-color: #fff;
	}

	.popupContent button {
		height: 70rpx;
		line-height: 70rpx;
		font-size: 32rpx;
		border-radius: 36rpx;
		margin-bottom: 20rpx;
	}
	.popupIcon{
		margin-bottom: 20rpx;
	}
	// emoji
	.slider {
	    min-height: 200px;
	    .slider-emoji {
			margin-left: 10rpx;
			margin-right: 10rpx;
	        width: 375px;
	        flex-direction: row;
	        flex-wrap: wrap;
	        justify-content:center;
	        .slider-emoji-icon {
				font-size: 60rpx;
	            width: 53%;
	            text-align: center;
	            padding: 10.5px 0;
	        }
	    }
	}
	// <!-- 设置最后一列左靠齐 -->
	.lastbox{
	    justify-content: flex-start;
	}
	.popupButton{
		width: 70px;
		background-color: #fff;
	}
</style>
